<template>
  <div class="add-goods">
    <!-- 面包屑 -->
    <div class="title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/news' }"
          >新闻管理</el-breadcrumb-item
        >
        <el-breadcrumb-item>添加新闻</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 表单数据 -->
    <div class="myform">
      <el-form
        :model="goodsForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- <el-form-item label="类目选择" prop="category">
          <el-button type="primary">类目选择</el-button>
        </el-form-item> -->

        <el-form-item label="新闻标题" prop="title">
          <el-input v-model="goodsForm.title"></el-input>
        </el-form-item>
        <!-- <el-form-item label="商品价格" prop="price">
          <el-input v-model="goodsForm.price"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="商品数量" prop="num">
          <el-input v-model="goodsForm.num"></el-input>
        </el-form-item> -->
        <el-form-item label="新闻图片" prop="image">
          <el-button type="primary">上传图片</el-button>
        </el-form-item>
        <el-form-item label="新闻描述" prop="descs">
          <textarea name="" id="" cols="30" rows="10"></textarea>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确定</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsForm: {
        //表单容器-对象
        title: "", //商品名称
        price: "",
        num: "",
        sellPoint: "",
        image: "",
        descs: "",
        category: "", //商品类目
        date1: "", //商品时间
        date2: "", //商品时间
      },
      rules: {
        //校验规则
        title: [
          { required: true, message: "请输入新闻标题", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        num: [{ required: true, message: "请输入数量", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const url = "http://1.14.30.101:8888/adminlogin";

          const params = `account=${this.loginForm.account}&apwd=${this.loginForm.apwd}`;
          console.log(params);

          this.$http.post(url, params).then((res) => {
            console.log(res); //如果错误，msg中会提示哪个参数错误
            if (res.data.code == 200) {
              console.log("登录成功");
              window.sessionStorage.setItem("token", res.data.token);
              this.$router.push("/");
            } else {
              alert("登录失败" + res.data.message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang='less' scoped>
.add-goods {
  margin: 20px;
}
.title {
  padding: 10px;
  background: #fff;
  border: 1px solid #eee;
  margin-bottom: 20px;
}
.myform {
  background: #fff;
  padding: 10px;
  padding-right: 30px;
}
.line {
  text-align: center;
}
</style>